<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>二级联动菜单</title>
    <script>
        function addCity() {
            // 获取城市并清空
            let city = document.getElementById("city");
            city.length = 1;
            //获取省份
            let province = document.getElementById("province");
            let selectedOption = province.options[province.selectedIndex];
            let city1 = ["南京", "苏州", "无锡", "泰州", "常州", "徐州", "盐城", "连云港", "扬州"];
            let city2 = ["合肥", "芜湖", "滁州", "蚌埠", "六安", "马鞍山"];
            let city3 = ["杭州", "宁波", "温州", "嘉兴", "绍兴"];
            let selectedProvince = selectedOption.text;
            if (selectedProvince === "江苏省") {
                for (let i = 0; i < city1.length; i++) {
                    let option = new Option(city1[i], i+1);
                    city.options[city.options.length] = option;
                }
            } else if (selectedProvince === "安徽省") {
                for (let i = 0; i < city2.length; i++) {
                    let option = new Option(city2[i], i+1);
                    city.options[city.options.length] = option;
                }
            } else if (selectedProvince === "浙江省") {
                for (let i = 0; i < city3.length; i++) {
                    let option = new Option(city3[i], i+1);
                    city.options[city.options.length] = option;
                }
            }
        }

    </script>
</head>
<body>
<select id="province" onchange="addCity()">
    <option value="-1">请选择省份</option>
    <option value="1">江苏省</option>
    <option value="2">安徽省</option>
    <option value="3">浙江省</option>
</select>
<!--
    城市下拉列的数据是根据用户选择的省份的选项而定的,选中了对应省份之后,会自动加载出该省份所对应的城市
    如果选择江苏省,则城市加载出:南京、苏州、无锡、泰州、常州、徐州、盐城、连云港、扬州
    如果选择安徽省,则城市加载出:合肥、芜湖、滁州、蚌埠、六安、马鞍山
    如果选择浙江省,则城市加载出:杭州、宁波、温州、嘉兴、绍兴
-->
<select id="city" >
    <option value="-1">请选择城市</option>
</select>
</body>
</html>